<template>
  <el-dialog
    title="选择列表"
    style="height: 80%; width: 85%; overflow: auto; z-index: 9999;"
  >
    <!-- <el-select v-model="selectedValues" multiple placeholder="请选择">
      <el-option
        v-for="item in sct"
        :key="item.id"
        :value="item.id"
        :id="item.value"
      >
      </el-option>
    </el-select> -->
  <van-checkbox-group v-model="selectedValues" @change="handleCheckboxChange">
  <van-checkbox v-for="item in sct" :key="item" :name="item" >{{item}}</van-checkbox>
  </van-checkbox-group>
    <div slot="footer">
      <div class="dialog-footer">
        <el-button @click="cell">取 消</el-button>
        <el-button type="primary" @click="submitSelection">确 定</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { userStore } from "../../stores/user.ts";
export default {
  data() {
    return {
      dialogVisible: false,
      selectedValues: [],
      options: [],
    };
  }, 
  mounted() {

    },
  computed: {
    sct() {
      console.log(this.user.select.split(","));
      this.options = this.user.select.split(",")
      return this.options;
    },
  },
  created() {
    this.user = userStore();
  },
  methods: {
    submitSelection() {
      // 处理选中的值
      console.log(this.selectedValues);
      this.dialogVisible = false;
      this.$emit("submitse5", this.selectedValues, this.dialogVisible);
      this.selectedValues = [];
    },
    cell() {
      this.selectedValues = [];
      this.$emit("submitse5", this.selectedValues, this.dialogVisible);
      // this.selectedValues=[]
    },
    handleCheckboxChange(option){
          console.log("222",option)
    }
  },
};
</script>
<style scoped>
::v-deep .dialog-footer {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin-top: 20px;
}
::v-deep .el-select {
  --el-select-border-color-hover: var(--el-border-color-hover);
  --el-select-disabled-color: var(--el-disabled-text-color);
  --el-select-disabled-border: var(--el-disabled-border-color);
  --el-select-font-size: var(--el-font-size-base);
  --el-select-close-hover-color: var(--el-text-color-secondary);
  --el-select-input-color: var(--el-text-color-placeholder);
  --el-select-multiple-input-color: var(--el-text-color-regular);
  --el-select-input-focus-border-color: var(--el-color-primary);
  --el-select-input-font-size: 14px;
  --el-select-width: 100%;
  display: inline-block;
  position: relative;
  vertical-align: middle;
  width: var(--el-select-width);
}
::v-deep .van-checkbox__label{
  font-size: 20px;
}
::v-deep .van-checkbox{
  height: 34px;
}
::v-deep .el-dialog__title{
  font-size: 20px;
}
/* ::v-deep .el-dialog__header{
  margin-bottom: 12px !important;
} */ 
</style>
